<template>
  <div class="main-container container-fluid container-limited page-holder">
    <breadcrumb />
    <div class="easy-container" v-loading="loading">
      <h4>{{ annc.title }}</h4>
      <template v-if="annc.id">
        <div class="flex align-items-center">
          <router-link :to="`/users/${annc.author.id}`" class="link el-link--primary m-r-10">
            {{ annc.author.nickname }}
          </router-link>
          &nbsp;
          <timeago2 :date-time="annc.created_at" pre-text="发布于 " />
          <span
            v-if="isWebAdmin || isGroupOwner || isGroupAdmin"
            class="m-l-30 link el-link--danger"
            @click="deleteItem"
            v-text="'删除'"
          ></span>
        </div>
        <ckeditor :initial-content="annc.content" readonly />
        <comments-plain
          module="GroupNotice"
          :module-id="annc.id"
          :module-author-id="annc.author.id"
          :pagination="true"
          class="p-x-16"
        />
      </template>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import CommentsPlain from '@/components/comments-plain';
import { formatAnnouncement } from '@/views/groups/format';

export default {
  name: 'GroupAnnouncementShow',
  components: { CommentsPlain },
  data() {
    return {
      annc: {},
      loading: false,
    };
  },
  computed: {
    ...mapGetters(['isWebAdmin', 'isGroupOwner', 'isGroupAdmin']),
    loadAnncParams() {
      return {
        groupId: this.$route.params.groupId,
        id: this.$route.params.anncId,
      };
    },
  },
  created() { this.loadAnnc(); },
  methods: {
    // 加载公告
    loadAnnc() {
      this.loading = true;
      this.$api.groupAnnouncements.show(this.loadAnncParams)
        .then((res) => { this.annc = formatAnnouncement(res.data); })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
    // 删除公告
    deleteItem() {
      this.$msgbox({
        title: '提示',
        message: '确认删除这份公告吗？',
        showCancelButton: true, // 显示取消按钮
        customClass: 'confirm-left',
        confirmButtonText: '确定',
        confirmButtonLoading: false,
        confirmButtonClass: 'el-button--danger',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            Object.assign(instance, {
              confirmButtonLoading: true,
              confirmButtonText: '正在删除...',
            });
            this.$api.groupAnnouncements.delete({
              groupId: this.$route.params.groupId,
              id: this.item.id,
            }).then(() => {
              this.$message.success('删除成功');
              this.$router.push(`/groups/${this.$route.params.groupId}`);
            }).catch(() => {})
              .then(() => done());
          } else done();
        },
      });
    },
  },
  watch: {
    loadAnncParams() { this.loadAnnc(); },
  },
};
</script>

<style></style>
